@extends('layouts.wechat.application')
@section('css')
    <style>
        #top {
            font-size: 20px;
            margin: 70px 30px 30px 60px;
            text-align: center;
        }
    </style>
@endsection
@section('content')
    <div class="page-index" id="home" data-log="首页">
        <div class="index-header">
            <div class="search_bar">
                <a href="/product/search">
                    <span class="icon icon-search"></span>
                    <span class="text">搜索商品名称</span>
                </a>
            </div>
            <div class="search_bottom"></div>
        </div>
        <!--焦点图-->
        <section class="slider">
            <div class="flexslider">
                <ul class="slides">
                    @foreach($wechat as $p)
                        <li>
                            <a href="{{$p->url}}">
                                <img src="{!! $p->image !!}"/>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </section>
        <!--推荐商品-->
        <div class="list">
            <div class="section">
                <div class="mcells_auto_fill">
                    <div class="body">
                        @foreach($wechats as $key => $wec)
                            <div>
                                <div class="items" onclick="location.href='{{$wec->url}}'">
                                    <img style="width: 200px;height: 100px;" src="{{$wec->image}}">
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @foreach($product as $produ)
                <div class="section" onclick="location.href='/product/{{$produ->id}}'">
                    <div>
                        <div class="item">
                            <div class="img">
                                @if($produ->image)
                                    <img style="width: 100px;" src="{{$produ->image}}" class="ico">
                                @endif
                                @if($produ->is_new)
                                    <img class="tag " src="/wechat/images/new.png">
                                @elseif($produ->is_selling)
                                    <img class="tag " src="/wechat/images/hot.png">
                                @endif
                            </div>
                            <div class="info">
                                <div class="name"><p>{!! sub($produ->name,25) !!}</p></div>
                                <div class="brief"><p>{!! sub($produ->description,30) !!}</p></div>
                                <div class="price"><p>{{$produ->price}}元 起</p></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            <a href="javascript:void(0);" id="top" style="visibility: visible;">
                我是有底线的,点我返回顶部
            </a>
        </div>

    </div>
    @include('layouts.wechat._headr')
@endsection

@section('js')
    <script>
        $(function () {
//            $(window).scroll(function () {
//                var topDistance = $(window).scrollTop();  //获取鼠标在本窗口现有状态下移动的高度
//                if (topDistance > 100) {  //如果移动高度大于100px,顶部图标单单显示出，如果移动高度小于等于100，顶部图标不显示
//                    $('#top').fadeIn(800);
//                } else {
//                    $('#top').fadeOut(800);
//                }
//            });
            $('#top').on('click', function () {
                $('html,body').animate({scrollTop: 0}, 800); //必须用$('html,body')选择，不然没效果
            });
        });
    </script>
@endsection